.colorBackground {
  border-bottom: 1px solid #e7e7e7;
  min-height: 55px;
}


.backgroundp{
  min-height: calc(100vh - 150px);
  // background: #ffffff;
}

.backgroundpw{
  min-height: calc(100vh - 150px);
  background: #ffffff;
}

.gutterRow{
  background: #ffffff;
}
.colorBackground {
  background-color: #fff;
  border-bottom: 1px solid #e7e7e7;
  min-height: 55px;
}

.title{
  display: flex;
  justify-content:space-between;
  padding-top: 5px;
  padding-bottom: 5px;
  width: 100%;
  span:first-child{
    color: #000;
    font-size: 16px;
    border-left: 5px solid #13c2f3;
    padding-left: 10px;
  }
  span{
    margin: 0 10px;
  }
  .tcpandding{
    flex-grow:1;
  }
}

.round{
    margin-top: 4px;
    margin-right: 10px;
    width: 16px;
    height: 16px;
    border-radius:50%;
    border:3px solid #4bcdf1; 
}
.rounds{
  margin-top: 4px;
  margin-right: 10px;
  width: 16px;
  height: 16px;
  border-radius:50%;
  border:3px solid #ff4049; 
}
.gutterRows{
  min-height: calc(100vh - 150px);
  background: #ffffff;
  text-align: center;
}
.ProblemsKU{
  width: 117px;
  font-weight: 600;
  text-align: center;
 padding: 9px 0px;
 background: #ffad00; 
 border-radius: 0px 25px 25px 0px;
 font-size: 15px;
 color: #fff;
}
.bjback{
  height: 171px;
}
.textZy{
 position: relative;
 right: 4px;
 cursor: pointer;
}
.flexjz{
  display: flex;
  justify-content:space-between;
  
}
.buttonBj{
  display: flex;
  flex-wrap:wrap;
  justify-content:center;

}
.quchakan{
 padding: 20px 0px;
 text-align: center;
 background:#0dbdee;
 color: #ffffff;
 border-radius:5px; 
 white-space:nowrap;
 cursor: pointer;
 transition: all .5s;
}

.quchakan:active
{
background-color:#ffa741;
}

.quchakan:hover
{
background-color:#ffa741;
}

.heimingdan{


  padding: 20px 0px;
  text-align: center;
  background:#eaeff3;
  border-radius:5px; 
  white-space:nowrap;
  cursor: pointer;
  color: #4b5475;
  transition: all .5s;
}
.heimingdan:active
{
background-color:#ffa741;
}

.heimingdan:hover
{
background-color:#ffa741;
}
.flextc{
  display: flex;
  align-items:center;
  justify-content:center;
}

.imga{
  display: flex;
justify-content:center;
 height: 180px;
 border-right:1px dashed #f0f0f0;
 border-bottom:1px dashed #f0f0f0;
 background: #f6fafe;
}
.imgb{
  display: flex;
  justify-content:center;
height: 180px;
border-bottom:1px dashed #f0f0f0;
background: #f6fafe;
}
.imgc{
  display: flex;
  justify-content:center;
  height: 180px;
  border-right:1px dashed #f0f0f0;
  background: #f6fafe;
 }
 .imgd{
  display: flex;
  justify-content:center;
  height: 180px;
  background: #f6fafe;
 }
 :global{
  .padd{
    .element.style{
     padding-left: 0px;
     padding-right: 0px;
   }
  }
}
.rightBj{
  height: 140px;
  display: flex;
  align-items:center;
  justify-content:space-between;
  
}
.xflex{
  flex-wrap: nowrap;
  display: flex;
justify-content:flex-start;

}

.rightButtona{
  padding: 16px 54px;
 text-align: center;
  background:#108eff;
  color: #ffffff;
  border-radius:35px; 
  white-space:nowrap;
  cursor: pointer;
  box-shadow:0 5px 0 #d0defd;
  transition: all .5s;
}
.rightButtona:active
{
background-color:#ffa741;
}
.rightButtona:hover
{
background-color:#ffa741;
}


.rightFFF{
  padding: 16px 54px;
  text-align: center;
   background:#fff;
   color: #ffffff;
   border-radius:35px; 
   white-space:nowrap;
}


.rightButtonx{
  padding: 16px 54px;
 text-align: center;
  background:#9dbcff;
  color: #ffffff;
  border-radius:35px; 
  white-space:nowrap;
  cursor: pointer;
  box-shadow:0 5px 0 #d0defd;
  transition: all .5s;
}
.rightButtonx:active
{
background-color:#ffa741;
}
.rightButtonx:hover
{
background-color:#ffa741;
}
.tjwca{
  // margin-left: 40px;
  width: 390px;
}
.tjwcb{
  display: flex;
  justify-content:flex-start;
  // flex-basis:35%;
   width: 400px;
   align-items:center;
}
.title1{
  display: flex;
  padding-top: 5px;
  padding-bottom: 5px;
  width: 100%;
  span:first-child{
    color: #000;
    font-size: 16px;
    border-left: 5px solid #13c2f3;
    padding-left: 10px;
  }
  span{
    margin: 0 10px;
  }
  .tcpandding{
    flex-grow:1;
  }
}
.flexBj{
  display: flex;
  flex-wrap:wrap;
}
.buttongl{
  
  display: flex;
  align-items: center;
  min-width: 56px;
  height:24px;
  background: #e8313b;
  padding: 5px 7px 5px 7px;
  color: #ffffff;
  border-radius:5px; 
  cursor: pointer;
   white-space : nowrap;
   transition: all .5s;
}
.buttongl:active
{
background-color:rgb(255, 51, 129);
}
 
.buttong3{
  
  // width: 66px;
  background:#13c2f3;
  padding: 1px 7px 1px 7px;
  color: #ffffff;
  border-radius:5px; 
  cursor: pointer;
  transition: all .5s;
}
.buttong3:active
{
background-color:rgb(9, 169, 243);
}

.buttong4{
  
  // width: 66px;
  background:#657deb;
  padding: 1px 7px 1px 7px;
  color: #ffffff;
  border-radius:5px; 
  cursor: pointer;
  transition: all .5s;
}
.buttong2:active
{
background-color:rgb(183, 19, 233);
}

.buttong4{
  
  // width: 66px;
  background:#657deb;
  padding: 1px 7px 1px 7px;
  color: #ffffff;
  border-radius:5px; 
  cursor: pointer;
  transition: all .5s;
}
.buttong2:active
{
background-color:rgb(20, 20, 20);
}

.buttong2{
  
  // width: 66px;
  background:#565b78;
  padding: 1px 7px 1px 7px;
  color: #ffffff;
  border-radius:5px; 
  cursor: pointer;
  transition: all .5s;
}
.buttong2:active
{
background-color:rgb(20, 20, 20);
}
.border{
  border-bottom:1px dashed #e8e8ee; 
  margin-bottom: 20px;
}
.pb{
  display: flex;
  // flex-wrap:wrap;
  flex-wrap: nowrap;

}
.red{
  background-color: #e8f9ff;
  color: #3bb9ff;
 }
 .buttongx{
  display: flex;
  align-items: center;
  width: 70px;
  height:24px;
  background: #13c2f3;
  padding: 5px 10px 5px 10px;
  color: #ffffff;
  border-radius:5px;
  cursor: pointer;
  transition: all .5s;
}
.buttongx:active
{
background-color:rgb(51, 163, 255);
}
.flexBj{
  display: flex;
  flex-wrap:wrap;
}
.overa{
  height:calc(90vh);
  overflow: hidden;
}
.over{
  height:calc(73vh);
  overflow-y: auto;
}
.Rowpb{
  display: flex;
  justify-content:flex-start;
  align-items:center;
}
.float{
  position: relative;
  bottom: 7px;
  
}


.progrees{
  display: flex;
  flex-direction:column;
  justify-content: center;
  align-items: center;
}
.abc{
  display:block;
  overflow:hidden;
  word-break:keep-all;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.imgBk{
  width: 70px;
  height: 70px;
  background: #42afff;
  border-radius:25px; 
  display: flex;
  align-items:center;
  justify-content:center;
  transition: all .5s;
}
.imgBk:active
{
background-color:#ffa741;
}
.imgBk:hover{
  background-color:#ffa741;
}
.loading:after {
  overflow: hidden;
  display: inline-block;
  vertical-align: bottom;
  animation: ellipsis 2s infinite;
  content: "\2026"; /* ascii code for the ellipsis character */
}
@keyframes ellipsis {
  from {
      width: 2px;
  }
  to {
      width: 15px;
  }
}
.center{
  display: flex;
  align-items:center;
}
.left{
  display: flex;
justify-content:flex-start;

}